<template>
  <div class="box">
    <a v-for="name in list"   :href="name.url+'&rootMobile='+rootMobile+'&accessToken='+accessToken+'&rootAppId='+rootAppId">
      <img :src="name.mainPhoto.smallPicUrl" alt="">
      <span class="name">{{name.shareTitle}}</span><br>
      <span class="price">￥{{name.price}}</span>
    </a>
  </div>
</template>
<script>
  import axios from 'axios';
  export default{
    name:"refles",
    data(){
      return {
        list : [],
        rootMobile:"13167676767",
        accessToken:"067a37aed0224984acc0bef247c12245_440100000002743",
        rootAppId:"440100000002743"
      }
    },
    mounted(){
      // 缓存指针
      let _this = this;
      // 设置一个开关来避免重负请求数据
      let sw = true;
      axios.get('http://123.127.41.166:8180/mall/app/category/goods/jdlist.json?orgFlag=0&pageNo=1&homeClassId=70540&classId=71749')
        .then(function(res){
          // console.log(JSON.parse(response.data).stories);
          // 将得到的数据放到vue中的data
          _this.list = res.data.data.list;
        })
        .catch(function(error){
          console.log(error);
        });

      // 注册scroll事件并监听

      window.addEventListener('scroll',function(){
        let scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;
        // console.log(document.documentElement.clientHeight+'-----------'+window.innerHeight); // 可视区域高度
        // console.log(document.body.scrollTop); // 滚动高度
        // console.log(document.body.offsetHeight); // 文档高度
        // 判断是否滚动到底部
        if(document.documentElement.scrollHeight == document.documentElement.clientHeight + scrollTop) {
          console.log(sw);
          // console.log(sw);
          // 如果开关打开则加载数据
          if(sw==true){
            // 将开关关闭
            sw = false;
            axios.get('http://123.127.41.166:8180/mall/app/category/goods/jdlist.json?orgFlag=0&pageNo=1&homeClassId=70540&classId=72574')
              .then(function(res){
                console.log(res.data);
                // 将新获取的数据push到vue中的data，就会反应到视图中了
                res.data.data.list.forEach(function(val,index){
                  _this.list.push(val);
                  // console.log(val);
                });
                // 数据更新完毕，将开关打开
                sw = true;
              })
              .catch(function(error){
                console.log(error);
              });
          }
        }
      });
    }
  }
</script>
<style scoped>
  *{
    margin:0;
    padding:0;
  }
  li{
    list-style:none;
  }
</style>
